<template>
  <div class="message" ref="message-list" style="background-color:rgb(243,243,249);" :style="{height:rightObjData.index ==0?'calc(100% - 160px)':'100%'}">
    <header class="userTitle" >
      {{ rightObjData.index ==0? currentName?currentName :'' : rightObjData.title }}
      <i class="el-icon-close" style="float:right;padding-right:35px;line-height:50px;cursor:pointer;" @click="maskClick()"></i>
    </header>
    <ul v-if="session && rightObjData.index ==0" style="padding:10px 15px;overflow-y: scroll;margin-top:50px">
      <li v-for="item in dataList" :key="item.index">
        <p class="time">
          <span>{{ item.date | time }}</span>
        </p>
        <div class="main" :class="{ self: item.self }">
          <!-- <span style="color:red;font-weight: bold;">!</span> -->
          <!-- <i class="icon-weibiaoti-3-01" @click.prevent="refreshCurrentPage"></i> -->
          <span v-if="successStatus==false">
            <span v-if="item.content == sendContentNew">
              <img style="width:17px;background:white;border-radius:50px;margin-right:2px" src="@/assets/svg/sendMessageError.svg" />
            </span>
            <span v-else></span>
          </span>
          <span v-else></span>
          <img class="avatar" width="30" height="30" :src="item.self ? ( item.img ? (item.self ? userList.img : dataList.img):leftAvator):rightAvator" />
          <div class="text">{{ item.content }}</div>
        </div>
      </li>
    </ul>
    <!-- <ul v-if="rightObjData.index != 0" style="padding:10px 15px;overflow-y: scroll;margin-top:50px">
      <li v-for="(item,index) in rightTwoData" :key="index" class="twoLi">
        <p class="time">
          <span>{{ item.time }}</span>
        </p>
        <div class="messageCard">
          <div class="cardTitle"><i class="iconfont icon-gerenxiaoxi_lef_curr" style="color:rgb(51, 140, 232);"></i>{{item.title}}</div>
          <div class="cardMessageContent">{{item.content}}</div>
        </div>
      </li>
      <div class="tips" v-if="rightTwoData.length == 0">
            暂无消息
      </div>
    </ul> -->
    <div class="content" v-if="rightObjData.index == 1">
      <div class="txt" v-for="(item,index) in rightTwoData" :key="index">
        <div class="headline" @click="titleShowClick(index)">
          <div class="read" :class="item.isReader == '未读' ? 'readStyle' : ''"></div>
          <span class="titleName">
            {{item.title}}
          </span>
          <span class="time">{{item.time}}</span>
        </div>
        <transition name="sub-comments">
          <div class="text" v-if="item.textShow">{{item.content}} </div>
        </transition>
      </div>
      <div class="tips" v-if="rightTwoData.length == 0">
        暂无消息
      </div>

      <!-- <div class="show-more" @click="moreClick()" v-if="rightTwoData.length !=0">
        我是有底线的
      </div> -->
    </div>
    <div class="content" v-if="rightObjData.index == 2">
      <div class="txt" v-for="(item,index) in rightThreeData" :key="index">
        <div class="headline" @click="titleShowClick(index)">
          <div class="read" :class="item.isReader == '未读' ? 'readStyle' : ''"></div>
          <span class="titleName">
            {{item.title}}
          </span>
          <span class="time">{{item.time}}</span>
        </div>
        <transition name="sub-comments">
          <div class="text" v-if="item.textShow">{{item.content}} </div>
        </transition>
      </div>
      <div class="tips" v-if="rightThreeData.length == 0">
        暂无消息
      </div>

      <!-- <div class="show-more" @click="moreClick()" v-if="rightTwoData.length !=0">
        我是有底线的
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  vuex: {
    getters: {
      user: ({ user }) => user,
      session: ({ sessions, currentSessionId }) =>
        sessions.find((session) => session.id === currentSessionId),
    },
  },
  filters: {
    // 将日期过滤为 hour:minutes
    time(date) {
      if (typeof date === "string") {
        date = new Date(date);
      }
      return date.getHours() + ":" + date.getMinutes();
    },
  },
  props: {
    sendcontent: {
      type: String,
    },
    maskShowClick: {
      type: Function
    },
    rightObjData: {
      type: Object
    },
    rightTwoData: {
      type: Array
    }
  },
  computed: {
    session() {
      return this.$store.state.sessions;
    },
    user() {
      return this.$store.state.user;
    },
    currentSessionId() {
      return this.$store.state.currentSessionId;
    },
    successStatus() {
      return this.$store.state.successStatus
    },
    sendContentNew() {
      return this.$store.state.sendContentNew
    }
  },
  created() {
    this.userList = this.$store.state.user;
  },
  data() {
    return {
      currentName:'',
      currentId:'', //当前会话人id
      dataList: [],
      userList: [],
      rightThreeData:[],
      leftAvator: require('@/assets/svg/leftImg.svg'),
      rightAvator: require('@/assets/svg/rightImg.svg')

    };
  },
  watch: {
    //监听发送的信息
    sendcontent() {
       let currentId = this.$store.state.sessions.filter(res=>{
        return res.accNo == this.currentId
      })[0] //取到当前会话人列表
      this.dataList = currentId.messages
    },
    dataList(value) {
      console.log(value);
      console.log(this.$store.state.sessions);
      // this.dataList = this.dataList.filter(res=>{
      //   return res.self != undefined
      // })
      //页面渲染完成后执行
      this.$nextTick(() => {
        this.toBottom();
      });
    },
    /**
     * @name: 监听会话id变化
     * @author: zhangzhanhua
     * @msg:
     * @param {*} newValue
     * @param {*} oldValue
     * @return {*}
     */
    currentSessionId(newValue, oldValue) {
      // console.log(newValue);
      this.currentId = newValue

      let currentId = this.$store.state.sessions.filter(res=>{
        return res.accNo == newValue
      })[0] //取到当前会话人列表
      this.currentName = currentId.name
      console.log(currentId);
      this.dataList = currentId.messages //获取当前会话列表
    }
  },
  mounted() {
    // alert(this.sendcontent)
    console.log(this.rightTwoData);
  },
  methods: {
    //已读未读逻辑判断
    titleShowClick(index) {
      var _this = this
      if (_this.rightTwoData[index].isReader == '未读') {
        console.log(_this.rightTwoData[index])
        _this.$http.put(`${this.$ServiceName}/api/external/cloud/${this.$version}/updatebyid`, {
          id: _this.rightTwoData[index].id
        }).then((res) => {
          this.rightTwoData[index].textShow = !this.rightTwoData[index].textShow
          this.rightTwoData[index].isReader = '已读'
        }).catch(error => { })
      } else {
        this.rightTwoData[index].textShow = !this.rightTwoData[index].textShow
        this.rightTwoData[index].isReader = '已读'
      }

    },
    //关闭遮罩层
    maskClick() {
      this.maskShowClick()
    },
    toBottom() {
      const listContainer = this.$refs["message-list"];
      listContainer.scrollTop = listContainer.scrollHeight;
    },
    /**
     * 连接websokcet的接口信息
     *
     * @param URL 链接的websocket地址
     *
     */
    connectWebSocket(URL) {
      var token = window.sessionStorage.getItem("token");
      var ws = new WebSocket(URL);
      ws.onopen = function (evt) {
        console.log("Connection open ...");
        // ws.send(token);
        var obj = {
          action: "login",
          token: token,
        };
        ws.send(JSON.stringify(obj));
      };

      ws.onmessage = function (evt) {
        alert(evt.data);
        var getData = JSON.parse(evt.data);
        if (getData.msgType == "01") {
          var messageObj = {
            messageData: new Date().getTime(),
            messageContext: getData,
          };
          store.commit("updateWebSocket", messageObj);
        } else {
          var messageObj = {
            messageData: new Date().getTime(),
            messageContext: { content: getData.content },
          };
          store.commit("updateWebSocket", messageObj);
        }
        console.log("Received Message: ", evt);
        // ws.close();
      };

      ws.onclose = function (evt) {
        console.log("Connection closed.");
      };
      ws.onerror = function () {
        console.log("Connection error");
      };
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 96%;
  height: 86%;
  padding: 2%;
  overflow: auto;
  margin-top: 50px;
  .txt {
    background: #ffffff;
    border-radius: 6px;
    padding: 5px 15px;
    margin: 10px 0;
    .headline {
      font-size: 14px;
      color: #303133;
      margin: 10px 0;
      position: relative;
      .titleName {
        cursor: pointer;
        position: relative;
      }
      .titleName:hover {
        color: blue;
      }
      .read {
        font-size: 10px;
        position: absolute;
        left: -2%;
        top: -106%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
      }
      .readStyle {
        border: 1px solid red;
        background-color: red;
      }
      .time {
        float: right;
        font-size: 12px;
        color: #909399;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .text {
      font-size: 12px;
      color: #606266;
      line-height: 20px;
      text-align: justify;
    }
  }
  .tips {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .show-more {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
  }
  .show-more:active {
    color: #60c5f1;
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.twoLi {
  display: flex;
  flex-direction: column;
  align-items: center;
  .messageCard {
    width: 360px;
    background-color: #fff;
    margin: 0 atuo;
    .cardTitle {
      height: 50px;
      line-height: 30px;
      padding: 10px 15px;
      box-sizing: border-box;
      border-bottom: 1px #eaeaea solid;
      font-size: 16px;
      font-weight: bold;
    }
    .cardMessageContent {
      padding: 15px 15px;
      color: #909399;
    }
  }
}

.userTitle {
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #e1e4eb;
  box-shadow: 0px 1px 0px #e1e4eb;
  position: absolute;
  width: 100%;
  background-color: rgb(243, 243, 249);
  padding-left: 20px;
  z-index: 100;
}
::-webkit-scrollbar {
  display: none;
}
.message {
  //   padding: 10px 15px;
  overflow-y: scroll;

  li {
    margin-bottom: 15px;
    list-style: none;
  }
  .time {
    margin: 7px 0;
    text-align: center;

    > span {
      display: inline-block;
      padding: 0 18px;
      font-size: 12px;
      color: #fff;
      border-radius: 2px;
      background-color: #dcdcdc;
    }
  }
  .avatar {
    float: left;
    margin: 0 10px 0 0;
    border-radius: 3px;
  }
  .text {
    display: inline-block;
    position: relative;
    padding: 10px 10px;
    max-width: ~"calc(100% - 200px)";
    // min-height: 30px;
    line-height: 1.5;
    font-size: 12px;
    text-align: left;
    word-break: break-all;
    background-color: #fafafa;
    border-radius: 4px;

    &:before {
      content: " ";
      position: absolute;
      top: 9px;
      right: 100%;
      border: 6px solid transparent;
      border-right-color: #fafafa;
    }
  }

  .self {
    text-align: right;

    .avatar {
      float: right;
      margin: 0 0 0 10px;
    }
    .text {
      background-color: #b2e281;

      &:before {
        right: inherit;
        left: 100%;
        border-right-color: transparent;
        border-left-color: #b2e281;
      }
    }
  }
}
</style>
